<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <v-header
      activeClass="2"
      :tcxs="tcxs"
      v-on:childByValue="childByValue"
    ></v-header>
    <div data-v-3af161fe="" class="box">
      <div data-v-d61a05fa="" data-v-3af161fe="" class="router-view">
        <!---->
        <div data-v-d61a05fa="" class="tab-loading" style="display: none;">
          <div data-v-12de4ad8="" data-v-d61a05fa="">
            <span data-v-12de4ad8="" class="loading"></span>
          </div>
        </div>
        <div data-v-d61a05fa="">
          <div data-v-4a2e347c="" data-v-d61a05fa="" class="tab">
            <div data-v-4a2e347c="">
              <div data-v-4a2e347c="" style="width: 99%;">
                <div
                  data-v-4a2e347c=""
                  style="padding-top: 40px; padding-bottom: 32px;"
                >
                  <div
                    data-v-4a2e347c=""
                    class=""
                    style="font-size: 24px; color: rgb(0, 0, 0);"
                  >
                    应用分类
                  </div>
                </div>
                <div data-v-4a2e347c="" class="el-row">
                  <div data-v-4a2e347c="" class="el-col el-col-2">
                    <div
                      data-v-4a2e347c=""
                      class=""
                      style="margin-right: 40px; width: 42px;"
                    >
                      分类
                    </div>
                  </div>
                  <div data-v-4a2e347c="" class="el-col el-col-22">
                    <div data-v-4a2e347c="" claidss="">
                      <span
                        data-v-4a2e347c=""
                        :class="[
                          firstid == item.id ? 'textClicked' : '',
                          'childtab'
                        ]"
                        v-for="(item, index) in category"
                        @click="tab(item.id)"
                        :key="item.id"
                        >{{ item.name }}</span
                      >

                      <!-- <span data-v-4a2e347c=""
                      class="childtab text">实用工具</span><span data-v-4a2e347c="" class="childtab text">社交通讯</span><span
                      data-v-4a2e347c="" class="childtab text">教育</span><span data-v-4a2e347c=""
                      class="childtab text">新闻阅读</span><span data-v-4a2e347c="" class="childtab text">拍摄美化</span><span
                      data-v-4a2e347c="" class="childtab text">美食</span><span data-v-4a2e347c=""
                      class="childtab text">出行导航</span><span data-v-4a2e347c="" class="childtab text">旅游住宿</span><span
                      data-v-4a2e347c="" class="childtab text">购物比价</span><span data-v-4a2e347c=""
                      class="childtab text">商务</span><span data-v-4a2e347c="" class="childtab text">儿童</span><span
                      data-v-4a2e347c="" class="childtab text">金融理财</span><span data-v-4a2e347c=""
                      class="childtab text">运动健康</span><span data-v-4a2e347c="" class="childtab text">便捷生活</span><span
                      data-v-4a2e347c="" class="childtab text">汽车</span> -->
                    </div>
                  </div>
                </div>

                <div data-v-4a2e347c="" class="el-row">
                  <div
                    data-v-4a2e347c=""
                    class="el-col el-col-24"
                    style="height: 15px;"
                  ></div>
                </div>
              </div>
              <!---->
            </div>
          </div>
          <!---->
          <div
            data-v-ea24c408=""
            data-v-d61a05fa=""
            class="doublecolumncardwithstar"
            style="min-height:550px"
          >
            <div data-v-ea24c408="" class="bottom" v-if="list.length > 0">
              <div
                data-v-ea24c408=""
                v-for="item in list"
                :key="item.id"
                class="item"
              >
                <router-link :to="{ name: 'Detail', query: { id: item.id } }"
                  ><img
                    data-v-ea24c408=""
                    :src="item.cover"
                    width="72"
                    height="72"
                    class="img"
                /></router-link>

                <!-- 77.348248862% -->
                <div data-v-ea24c408="" class="div">
                  <router-link :to="{ name: 'Detail', query: { id: item.id } }">
                    <div data-v-ea24c408="" class="right">
                      <div data-v-ea24c408="" class="labelbox">
                        <div data-v-ea24c408="" class="">
                          <span data-v-ea24c408="" class="name">{{
                            item.name
                          }}</span>
                          <div data-v-ea24c408="" class="text">
                            <div data-v-f8fa9bf8="" class="newStarBox">
                              <span class="star stargrey">
                                <span
                                  class="star starlight"
                                  :style="{
                                    width:
                                      item.star == 0
                                        ? '0%'
                                        : '' || item.star == 1
                                        ? '17.348248862%'
                                        : '' || item.star == 2
                                        ? '37.348248862%'
                                        : '' || item.star == 3
                                        ? '57.348248862%'
                                        : '' || item.star == 4
                                        ? '77.348248862%'
                                        : '' || item.star == 5
                                        ? '100%'
                                        : ''
                                  }"
                                ></span>
                              </span>
                            </div>
                            <span data-v-ea24c408="" class="mwText">{{
                              item.categoryName
                            }}</span>
                          </div>
                          <span data-v-ea24c408="" class="detail">{{
                            item.subtitle
                          }}</span>
                        </div>
                        <!---->
                      </div>
                    </div></router-link
                  >
                  <button
                    data-v-ea24c408=""
                    class="button"
                    @click="download(item.id)"
                  >
                    <span data-v-ea24c408="" class="myspan">安装</span>
                  </button>
                </div>
              </div>
            </div>

            <div
              data-v-7b357eef=""
              data-v-1b6e0b1f=""
              class="search_null"
              i="0"
              big="true"
              v-if="list.length == 0"
            >
              <img
                data-v-7b357eef=""
                src=""
                alt="Search Result Empty"
              />
              <p data-v-7b357eef="">没有符合条件的内容</p>
            </div>

            <div data-v-585dc428="" data-v-ea24c408="" style="display: none;">
              <div data-v-585dc428="" class="InstallPopup">
                <div data-v-585dc428="" class="tab-loading">
                  <div data-v-12de4ad8="" data-v-585dc428="">
                    <span data-v-12de4ad8="" class="loading"></span>
                  </div>
                </div>
                <!---->
                <!---->
                <!---->
              </div>
              <!---->
            </div>
            <div data-v-ea24c408="" class="mask" style="display: none;"></div>
          </div>
        </div>
        <!---->
        <!---->
      </div>
      <!---->
      <!---->
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
//引入底部头部组件
import Header from "../common/Header.vue";
import Footer from "../common/Footer.vue";
import axios from "axios";
import qs from "qs";

export default {
  data() {
    return {
      category: [],
      list: [""],
      tcxs: false,
      firstid: ""
    };
  },

  mounted() {
    if (this.$route.query.id) {
      this.firstid = this.$route.query.id;
    }

    this.requestcategory();
    console.log("syyfirstid:", this.firstid);
  },
  methods: {
    // 下载
    childByValue: function(childValue) {
      this.tcxs = childValue;
    },
    tab(e) {
      console.log(e);
      this.firstid = e;
      this.requestcategoryList(this.firstid);
    },
    requestcategory() {
      var data = {
        // "a":"getPortalArticle",
        // "aid":aid,
      };
      this.$http({
        url: `/api/appstore/category/findFirstCategory`,
        method: "post",
        headers: {
          // "Authentication":this.utoken,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请：",res);
          if (res.data.code == "1") {
            this.category = res.data.datas;
            if (this.firstid == "") {
              this.firstid = res.data.datas[0].id;
            }

            console.log("category:", this.category);
            console.log("firstid:", this.firstid);
            this.requestcategoryList(this.firstid);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    },

    requestcategoryList(id) {
      var data = {
        categoryId: id,
        pageSize: 1000,
        pageIndex: 1
      };
      this.$http({
        url: `/api/appstore/app/findAppListByCategory`,
        method: "post",
        headers: {
          // "Authentication":this.utoken,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请：",res);
          if (res.data.code == "1") {
            this.list = res.data.datas.data;
            console.log("list:", this.list);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    }
  },
  components: {
    "v-header": Header,
    "v-footer": Footer
  }
};
</script>

<style lang="css" scoped>
/* css 局部作用域 scoped*/
h2 {
  color: red;
}
</style>
